<!DOCTYPE html>
<html lang="en">
<head>
    <title>首页</title>
    <#include "common.ftl" />
    <style>
        body {
            width: 100%!important;
            height: 100%!important;
            background: url(${ticket.contextPath}/static/web/img/back2.jpg) no-repeat center fixed;
            background-size: 100% 100%;
        }
        .move:hover{
            color: #ed0a75;
            text-decoration : none;
        }
    </style>

</head>
<body id="homeBody">
<script>
    if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        console.log(document.getElementById("homeBody"))
        document.getElementById("homeBody").style.background="url(${ticket.contextPath}/static/web/img/back.jpg) no-repeat center fixed";
        document.getElementById("homeBody").style.backgroundSize="100% 100%";
    }
</script>
<div  class="container">
    <div class="row" style="margin-top: 10%;">
        <div class="col-lg-6 col-lg-offset-3">
            <div class="input-group">
                <input id="keyword" type="text" class="form-control" placeholder="世界那么大，还不去看看...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="search()">出发</button>
                </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
    <div class="container marketing" style="margin-top: 10%;">
        <!-- Three columns of text below the carousel -->
        <div class="row" id="content">

        </div><!-- /.row -->

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document" style="position: relative;top: 25%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button id="closeBtu" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">选座</h4>
                    </div>
                    <div class="modal-body" id="model-content">
                        <div class="row">
                            <div style="margin-left: 10%;">演出时间：</div>
                            <ul id="timeUL" style="display: flex;flex-wrap:wrap;justify-content: flex-start;list-style-type: none;padding:0;margin: 0 auto;margin-left: 20%">

                            </ul>
                        </div>
                        <div class="row" style="margin-top: 5%;">
                            <div style="margin-left: 10%;">选择票价：</div>
                            <ul id="priceUL" style="display: flex;flex-wrap:wrap;justify-content: flex-start;list-style-type: none;padding:0;margin: 0 auto;margin-left: 20%;">

                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-xs-9">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group" style="width: 110px;">
                                        <span class="input-group-addon" onclick="subNumber()" style="cursor: pointer;">
                                            -
                                        </span>
                                        <input id="buyNumber" type="text" style="text-align: center;" class="form-control" aria-label="Amount (to the nearest dollar)" onchange="changeNumber()"  value="1" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
                                        <span class="input-group-addon" onclick="addNumber()" style="cursor: pointer;">
                                            +
                                        </span>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="col-xs-3">
                            <#--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
                            <button id="subOrderBtu" type="button" class="btn btn-primary" onclick="subOrder()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <#--  去哪儿选项框 -->
        <div id="slideDown" style="position: fixed;bottom: 0px;right: 0px;z-index: 1000;width: 50px;" onclick="toWhere()">
            <img src="${ticket.contextPath}/static/web/img/guang.png" style="width: 100%;" >
        </div>

<script>
    var loginToken;
    var projectID ;
    var maxBuyCount;
    var timeId;
    var priceOption;
    var projectName;
    var priceName;
    var vocalStatus;
    $(function() {
        loginToken = $.cookie('loginToken');
        console.log(loginToken)
        if(!loginToken){
            console.log("跳转")
            window.location.href = "/web/page/auth";
        }
        $( "#content" ).delegate( "a", "click", function() {
            projectID = $(this).attr("name")
            projectName = $(this).attr("project-name")
            vocalStatus = $(this).attr("data-status")
            project($(this).attr("name"))
        });
        $( "#timeUL" ).delegate( "li", "click", function() {
            timeId = $(this).attr("name")
            $(".timeActive").css("border","1px dashed #c7c7c7")
            $(".timeActive").children().css("color","#337ab7")
            $(this).attr("class","timeActive")
            $(this).css( "border", "1px solid #ed0a75");
            $(this).children().css("color","#ed0a75")
            priceList(projectID,$(this).attr("name"))
        });
        $( "#priceUL" ).delegate( "li", "click", function() {
            var dis = $(this).attr("class")
            if(dis == "disabled"){
                return
            }
            priceOption = $(this).attr("name")
            priceName = $(this).attr("data-price")
            $(".priceActive").css("border","1px dashed #c7c7c7")
            $(".priceActive").children().css("color","#337ab7")
            $(this).attr("class","priceActive")
            $(this).css( "border", "1px solid #ed0a75");
            $(this).children().css("color","#ed0a75")
        });
    });

    function subNumber() {
        var number = $("#buyNumber").val()
        $("#buyNumber").val(number)
        if(!maxBuyCount){
            maxBuyCount = 2
        }
        if(number <= 1){
            $("#buyNumber").val(1)
        }else{
            number--
            $("#buyNumber").val(number)
        }
    }

    function addNumber() {
        var number = $("#buyNumber").val()
        if(!maxBuyCount){
            maxBuyCount = 2
        }
        if(number >= maxBuyCount){
            $("#buyNumber").val(maxBuyCount)
        }else{
            number++
            $("#buyNumber").val(number)
        }
    }
    function changeNumber() {
        var number = $("#buyNumber").val()
        if(!maxBuyCount){
            maxBuyCount = 2
        }
        if(number<=0 || number > maxBuyCount){
            $("#buyNumber").val(1)
        }
    }
    function toWhere() {
        window.location.href = "/web/page/index";
    }
    function search(){
        var list;
        var keyword = $("#keyword").val()
        var url="/web/api/search?keyword="+keyword;
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    var json = JSON.parse(data)
                    var pageData = json.pageData
                    $("#content").empty();
                    if(!pageData.resultData){
                        $("#content").append("<div class=\"col-lg-4 col-md-6 col-sm-12\" style=\"margin-bottom: 5%;height: 150px;\">" +
                                    "<div class=\"col-xs-4\">"+
                                    "<img  class=\"img-rounded\" src=\"${ticket.contextPath}/static/web/img/no-search.png\" alt=\"Generic placeholder image\" width=\"80px\" height=\"80px\">"+
                                    "</div>"+
                                    "<div class=\"col-xs-8\">"+
                                    "<h5 style=\"margin-left:0px;margin-top: 30px;overflow: hidden;height: 30px;\">"+
                                    "抱歉！没有找到符合条件的演唱会"+
                                    "</h5>"+
                                    "</div>"+
                                    "</div>")
                    }
                    var resultData=pageData.resultData
                    list = resultData;
                    $.each(resultData, function(index, vocal) {
                        if(vocal.isxuanzuo == 1){
                            return true
                        }
                        var id = vocal.id.split("_")
                        id = id[id.length-1]
                        $("#content").append("<div class=\"col-lg-4 col-md-6 col-sm-12\" style=\"margin-bottom: 5%;height: 150px;\">" +
                                "<div class=\"col-xs-6\">" +
                                "<img class=\"img-rounded\" src=\"https://pimg.damai.cn/perform/project/"+vocal.imgurl+"/"+id+"_n.jpg\" alt=\"Generic placeholder image\" width=\"140\" height=\"140\">" +
                                "</div>" +
                                "<div class=\"col-xs-6\">" +
                                "<h5 style=\"margin-top: 0;overflow: hidden;height: 30px;\">"+vocal.nameNoHtml+"</h5>" +
                                "<p style='font-size: 10px;'>"+vocal.venue +" - "+vocal.venuecity+"<br>时间:"+vocal.showtime+"<br>￥"+vocal.price_str+"</p>" +
                                "<p>" +
                                "<a class=\"btn btn-default btn-xs btn-primary\" data-status=\""+vocal.showstatus+"\" project-name=\""+vocal.nameNoHtml+"\" data-toggle=\"modal\" name=\""+vocal.projectid+"\" data-target=\"#myModal\" href=\"#\" role=\"button\">点击加入抢票 &raquo;</a>" +
                                "</p>" +
                                "</div>" +
                                "</div>");
                    });
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }

    function project(projectId){
        var url="/web/api/project?projectId="+projectId;
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    var json = JSON.parse(data)
                    console.log(json.Data)
                    var performs = json.Data.performs
                    var prices = json.Data.prices
                    maxBuyCount = performs[0].MaxBuyCount
                    timeId = performs[0].PerformID
                    $("#timeUL").empty();
                    $.each(performs, function(index, perform) {
                        if(index == 0){
                            $("#timeUL").append("<li class=\"timeActive\" name=\""+perform.PerformID+"\" style=\"margin-right: 20px;overflow:hidden;border: 1px solid #ed0a75;\"><a class=\"time move\" style='color: #ed0a75;'>"+perform.PerformName+"</a></li>");
                        }else{
                            $("#timeUL").append("<li name=\""+perform.PerformID+"\" style=\"margin-right: 20px;overflow:hidden;border: 1px dashed #c7c7c7;\"><a class=\"time move\">"+perform.PerformName+"</a></li>");
                        }
                    });
                    $("#priceUL").empty();
                    var first = 33;
                    $.each(prices, function(index, price) {
                        if(first == 33 && (price.Status == 0 || vocalStatus == "预订" || vocalStatus == "售票中" || vocalStatus == "预售")){
                            first = index
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"   data-price=\""+price.PriceName+"\" class=\"priceActive\" style=\"margin-right: 20px;overflow:hidden;border: 1px solid #ed0a75;\"><a class=\"price move\" style='color: #ed0a75;'>"+price.PriceName+"</a></li>");
                        }else if(price.Status == 1 &&( vocalStatus != "预订" && vocalStatus != "售票中" && vocalStatus != "预售")){
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"   data-price=\""+price.PriceName+"\" class=\"disabled\" style=\"background-color:#f6f6f6;margin-right: 20px;overflow:hidden;border: 1px dashed #c7c7c7;\"><span>"+price.PriceName+"</span></li>");
                        }else{
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"   data-price=\""+price.PriceName+"\" style=\"margin-right: 20px;overflow:hidden;border: 1px dashed #c7c7c7;\"><a class=\"price move\">"+price.PriceName+"</a></li>");
                        }
                    });
                    if(first == 33){
                        priceOption = null
                        priceName = null
                        $("#subOrderBtu").attr("disabled","disabled")
                    }else{
                        priceOption = prices[first].PriceID
                        priceName= prices[first].PriceName
                        $("#subOrderBtu").removeAttr("disabled")
                    }


                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }

    function priceList(projectId,performId){
        var url="/web/api/projects?projectId="+projectId+"&performId="+performId;
        $.ajax({
            type:'GET',
            url:url,
            processData:false,
            contentType:false,
            cache: false,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null){
                    var json = JSON.parse(data)
                    console.log(json.Data)
                    var prices = json.Data.list
                    $("#priceUL").empty();
                    var first = 33;
                    $.each(prices, function(index, price) {
                        if(first == 33 && (price.Status == 0 || vocalStatus == "预订" || vocalStatus == "售票中" || vocalStatus == "预售")){
                            first = index
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"  data-price=\""+price.PriceName+"\" class=\"priceActive\" style=\"margin-right: 20px;overflow:hidden;border: 1px solid #ed0a75;\"><a class=\"price move\" style='color: #ed0a75;'>"+price.PriceName+"</a></li>");
                        }else if(price.Status == 1 &&( vocalStatus != "预订" && vocalStatus != "售票中" && vocalStatus != "预售")){
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"   data-price=\""+price.PriceName+"\" class=\"disabled\" style=\"background-color:#f6f6f6;margin-right: 20px;overflow:hidden;border: 1px dashed #c7c7c7;\"><span>"+price.PriceName+"</span></li>");
                        }else{
                            $("#priceUL").append("<li name=\""+price.PriceID+"\"  data-price=\""+price.PriceName+"\" style=\"margin-right: 20px;overflow:hidden;border: 1px dashed #c7c7c7;\"><a class=\"price move\">"+price.PriceName+"</a></li>");
                        }
                    });
                    if(first == 33){
                        priceOption = null
                        priceName = null
                        $("#subOrderBtu").attr("disabled","disabled")
                    }else{
                        priceOption = prices[first].PriceID
                        priceName= prices[first].PriceName
                        $("#subOrderBtu").removeAttr("disabled")
                    }
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }

    function subOrder() {
        if(projectName == null || projectName == "" || priceOption ==null){
            return
        }
        var number = $("#buyNumber").val()
        var data = new FormData()
        data.append("projectId",projectID)
        data.append("performId",timeId)
        data.append("priceId",priceOption)
        data.append("number",number)
        data.append("priceName",priceName)
        data.append("projectName",projectName)
        var url = "/web/api/shop";
        $.ajax({
            type:'POST',
            url:url,
            processData:false,
            contentType: false,
            // dataType: 'JSON',
            cache: false,
            data : data,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer "+loginToken);
            },
            success:function(data){
                if(data!=null && data == "success"){
                    $("#closeBtu").click()
                }
            },
            error:function(err){
                var ss = JSON.stringify(err)
                console.log(ss)
            }
        })
    }

</script>


</div>
</body>
</html>